<template>
  <div class="index-container">
    <div class="search">
      <input class="search-box" type="search" @click="goSearch" placeholder="小龙虾" placeholder-style="font-size: 13px; color: #999;">
      <i class="iconfont icon-search">&#xe60d;</i>
    </div>
    <!-- <swiper autoplay="true" interval="2000" indicator-dots=true circular="true">
        <swiper-item v-for="(item,index) in bannerMessages" :key="index">
          <image style="height: 170px; width: 100%" :src="item.bannerPath" @click="bannerToNews(item)" />
        </swiper-item>
      </swiper> -->
    <swiper class="swiper" autoplay="true" interval="2000" indicator-dots=true circular="true">
      <swiper-item>
        <image class="swiper-img" src="../../../static/images/banner1.jpg"/>
      </swiper-item>
      <swiper-item>
        <image class="swiper-img" src="http://img4.imgtn.bdimg.com/it/u=3826825821,912540263&fm=27&gp=0.jpg"/>
      </swiper-item>
      <swiper-item>
        <image class="swiper-img" src="http://img2.imgtn.bdimg.com/it/u=3356121154,1179528716&fm=27&gp=0.jpg"/>
      </swiper-item>
    </swiper>
    <ul class="column">
      <li class="one-column">
        <i class="iconfont icon-goods">&#xe60e;</i>
        <div class="column-tips">优选产品</div>
      </li>
      <li class="one-column">
        <i class="iconfont icon-new">&#xe619;</i>
        <div class="column-tips">新品尝鲜</div>
      </li>
      <li class="one-column">
        <i class="iconfont icon-list">&#xe656;</i>
        <div class="column-tips">常用清单</div>
      </li>
      <li class="one-column">
        <i class="iconfont icon-notice">&#xe639;</i>
        <div class="column-tips">公告栏</div>
      </li>
    </ul>
    <div class="block">
      <div class="dot-left">
        <i class="iconfont icon-dot1">&#xe82f;</i>
        <i class="iconfont icon-dot2">&#xe82f;</i>
        <i class="iconfont icon-dot3">&#xe82f;</i>
      </div>
      <!-- <div class="block-word">限时秒杀</div> -->
      <img class="words-img" src="../../../static/images/limit.png" alt="限时秒杀">
      <div class="dot-right">
        <i class="iconfont icon-dot4">&#xe82f;</i>
        <i class="iconfont icon-dot5">&#xe82f;</i>
        <i class="iconfont icon-dot6">&#xe82f;</i>
      </div>
    </div>
    <!-- <scroll-view scroll-x class="time-limit">
      <span class="limit-pro" v-for="(item, index) in proList" :key="index">{{ item }}
        <img class="close" @click="deleteAttributeValueList(index)" src="http://p0zxz4uq2.bkt.clouddn.com/close.png" />
      </span>
    </scroll-view> -->
    <scroll-view scroll-x class="time-limit">
      <div class="limit">
        <div class="one-limit">
          <img class="limit-img" src="../../../static/images/img.jpg" alt="商品图片">
          <div class="limit-name">BCD牌精选东北大米精选东北大米</div>
          <div class="limit-desc">
            <span class="red-text">&yen;250.00</span>
            <span class="desc">25kg装</span>
          </div>
          <div class="buy-btn">立即抢购</div>
        </div>
      </div>
      <div class="limit">
        <div class="one-limit">
          <img class="limit-img" src="../../../static/images/img.jpg" alt="商品图片">
          <div class="limit-name">BCD牌精选东北大米精选东北大米</div>
          <div class="limit-desc">
            <span class="red-text">&yen;250.00</span>
            <span class="desc">25kg装</span>
          </div>
          <div class="buy-btn">立即抢购</div>
        </div>
      </div>
      <div class="limit">
        <div class="one-limit">
          <img class="limit-img" src="../../../static/images/img.jpg" alt="商品图片">
          <div class="limit-name">BCD牌精选东北大米精选东北大米</div>
          <div class="limit-desc">
            <span class="red-text">&yen;250.00</span>
            <span class="desc">25kg装</span>
          </div>
          <div class="buy-btn">立即抢购</div>
        </div>
      </div>
      <!-- <div class="one-limit">
        <img class="limit-img" src="../../../static/images/img.jpg" alt="商品图片">
        <div class="limit-name">BCD牌精选东北大米精选东北大米</div>
        <div class="limit-desc">
          <span class="red-text">&yen;250.00</span>
          <span class="desc">25kg装</span>
        </div>
        <div class="buy-btn">立即抢购</div>
      </div> -->
    </scroll-view>
    <div class="img-show">
      <img class="img-big" src="../../../static/images/img.jpg" alt="特卖商品">
      <div class="img-right">
        <img class="img-long" src="http://img2.imgtn.bdimg.com/it/u=3356121154,1179528716&fm=27&gp=0.jpg" alt="特卖商品">
        <div class="img-bottom">
          <img class="img-small" src="../../../static/images/img.jpg" alt="特卖商品">
          <img class="img-small" src="../../../static/images/img.jpg" alt="特卖商品">
        </div>
      </div>
    </div>
    <scroll-view scroll-x class="categories">
      <div class="limit">
        <div class="category">
          <div class="normal-text">肉禽</div>
          <div class="gray-text">肉禽肉禽肉禽</div>
          <img class="category-img" src="../../../static/images/food.png" alt="分类商品">
        </div>
      </div>
      <div class="limit">
        <div class="category">
          <div class="normal-text">肉禽</div>
          <div class="gray-text">肉禽肉禽肉禽</div>
          <img class="category-img" src="../../../static/images/food.png" alt="分类商品">
        </div>
      </div>
      <div class="limit">
        <div class="category">
          <div class="normal-text">肉禽</div>
          <div class="gray-text">肉禽肉禽肉禽</div>
          <img class="category-img" src="../../../static/images/food.png" alt="分类商品">
        </div>
      </div>
      <div class="limit">
        <div class="category">
          <div class="normal-text">肉禽</div>
          <div class="gray-text">肉禽肉禽肉禽</div>
          <img class="category-img" src="../../../static/images/food.png" alt="分类商品">
        </div>
      </div>
      <div class="limit">
        <div class="category">
          <div class="normal-text">肉禽</div>
          <div class="gray-text">肉禽肉禽肉禽</div>
          <img class="category-img" src="../../../static/images/food.png" alt="分类商品">
        </div>
      </div>
    </scroll-view>
    <div class="block">
      <div class="dot-left">
        <i class="iconfont icon-dot1">&#xe82f;</i>
        <i class="iconfont icon-dot2">&#xe82f;</i>
        <i class="iconfont icon-dot3">&#xe82f;</i>
      </div>
      <!-- <div class="block-word">今日特卖</div> -->
      <img class="words-img" src="../../../static/images/hot.png" alt="今日特卖">
      <div class="dot-right">
        <i class="iconfont icon-dot4">&#xe82f;</i>
        <i class="iconfont icon-dot5">&#xe82f;</i>
        <i class="iconfont icon-dot6">&#xe82f;</i>
      </div>
    </div>
    <div class="pro-list">
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="middle-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
          <div class="product-spec">25kg装</div>
          <div class="product-price">&yen;250.00</div>
        </div>
        <i class="iconfont icon-cart">&#xe635;</i>
      </div>
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="middle-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
          <div class="product-spec">25kg装</div>
          <div class="product-price">&yen;250.00</div>
        </div>
        <i class="iconfont icon-cart">&#xe635;</i>
      </div>
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="middle-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
          <div class="product-spec">25kg装</div>
          <div class="product-price">&yen;250.00</div>
        </div>
        <i class="iconfont icon-cart">&#xe635;</i>
      </div>
    </div>
    <div class="load-more" @click="getMoreCom">查看更多</div>
    <div class="blank"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      comList: []
    }
  },

  methods: {
    async getCommdity () {
      let url = '/getBanner'
      let data = {}
      let result = await this.$post(url, data)
      console.log('测试一下接口')
      console.log(typeof result, result)
      // this.comList = result.data
      wx.hideLoading()
    },
    getMoreCom () {
      if (this.page < this.pageTotal) {
        wx.showLoading({
          title: '加载中'
        })
        this.page += 1
        this.getCommdity()
      }
    },
    goSearch () {
      wx.navigateTo({
        url: '../search/main'
      })
    },
    wxLogin () {
      wx.login({
        success: ret => {
          if (ret.code) {
            let code = ret.code
            console.log('code:', code)
            // getState(code)
            wx.setStorageSync('code', code)
          }
        }
      })
    }
  },

  onReachBottom () {
    this.getMoreCom()
  },

  onShow () {
    this.getCommdity()
    if (!wx.getStorageSync('code')) {
      this.wxLogin()
    }
  },

  mounted () {
    this.count = this.$store.state.count
  }
}
</script>

<style scoped>
.index-container {
  /* background-color: #f9f9f9; */
  background-color: #fff;
}

.search {
  position: relative;
  background-color: #fff;
  padding: 18rpx 30rpx;
}

.search-box {
  padding: 15rpx 90rpx;
  font-size: 26rpx;
  background-color: #f4f4f4;
  border-radius: 20rpx;
}

.icon-search {
  font-size: 32rpx;
  color: #b5b5b5;
  position: absolute;
  top: 42rpx;
  left: 75rpx;
}

.swiper {
  height: 370rpx;
  width: 100%
}
.swiper-img {
  height: 370rpx;
  width: 100%
}

.column {
  padding: 30rpx 10rpx 0 10rpx;
  display: flex;
  justify-content: space-around;
}

.one-column {
  margin: 0 35rpx;
}

.icon-goods,
.icon-new,
.icon-list,
.icon-notice {
  /* padding: 25rpx 20rpx; */
  border-radius: 50%;
  text-align: center;
  color: #fff;
  width: 110rpx;
  height: 110rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-goods {
  background-color: #ff4446;
  font-size: 50rpx;
}
.icon-new {
  background-color: #9acb00;
  font-size: 75rpx;
}
.icon-list {
  background-color: #ffae26;
  font-size: 60rpx;
}
.icon-notice {
  background-color: #e62225;
  font-size: 53rpx;
}

.column-tips {
  font-size: 26rpx;
  padding: 24rpx 0;
  text-align: center;
}

.block {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
  border-top: 10rpx solid #f9f9f9;
  border-bottom: 2rpx solid #f9f9f9;
}

.dot-left,
.dot-right {
  position: relative;
  width: 100rpx;
  height: 30rpx;
}

.icon-dot1 {
  position: absolute;
  top: -8rpx;
  left: 20rpx;
  font-size: 35rpx;
  color: #ed1c24;
}

.icon-dot2 {
  position: absolute;
  bottom: -10rpx;
  right: 25rpx;
  font-size: 25rpx;
  color: #b0c9f2;
}
.icon-dot3 {
  position: absolute;
  top: -8rpx;
  right: 0;
  font-size: 35rpx;
  color: #fffd00;
}
.icon-dot4 {
  position: absolute;
  top: -10rpx;
  right: 20rpx;
  font-size: 35rpx;
  color: #ed1c24;
}
.icon-dot5 {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  font-size: 25rpx;
  color: #b0c9f2;
}
.icon-dot6 {
  position: absolute;
  top: 15rpx;
  right: 20rpx;
  font-size: 35rpx;
  color: #fffd00;
}
.block-word {
  font-size: 32rpx;
  color: #ed1c24;
  font-weight: bolder;
}

.words-img {
  width: 124rpx;
  height: 33rpx;
}

.time-limit {
  display: flex;
  justify-content: flex-start;
  padding: 0 4rpx;
  white-space: nowrap;
}

.limit {
  display: inline-flex;
}
.one-limit {
  margin: 14rpx;
  padding: 0;
  width: 252rpx;
  border-radius: 8rpx;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);
}
.limit-img {
  width: 234rpx;
  height: 158rpx;
  margin: 8rpx 8rpx 0 8rpx;
  box-sizing: border-box;
}

.limit-name {
  padding: 0 8rpx;
  line-height: 34rpx;
  font-size: 22rpx;
  color: #666;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: justify;
  white-space: normal;
}
.limit-desc {
  display: flex;
  justify-content: space-between;
  padding: 0 8rpx;
  line-height: 34rpx;
  font-size: 22rpx;
}

.red-text {
  color: #e62225;
}

.text-nowrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.desc {
  color: #666;
}
.buy-btn {
  background-color: #e62225;
  color: #fff;
  width: 252rpx;
  height: 58rpx;
  line-height: 58rpx;
  font-size: 24rpx;
  text-align: center;
  border-bottom-left-radius:8rpx;
  border-bottom-right-radius:8rpx;
}

.img-show {
  display: inline-flex;
  border-top: 10rpx solid #f9f9f9;
  border-bottom: 10rpx solid #f9f9f9;
}
.img-big {
  width: 534rpx;
  height: 270rpx;
  margin: 15rpx 0 15rpx 17rpx;
  border-radius: 8rpx;
}

.img-right {
  height: 270rpx;
  margin: 15rpx 15rpx 0 0;
}

.img-long {
  width: 320rpx;
  height: 130rpx;
  margin-left: 10rpx;
  border-radius: 8rpx;
}
.img-bottom {
  display: inline-flex;
}
.img-small {
  width: 156rpx;
  height: 130rpx;
  margin: 0 0 15rpx 10rpx;
  border-radius: 8rpx;
}

.categories {
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
}
.category {
  width: 210rpx;
  /* height: 210rpx; */
  padding-top: 30rpx;
  text-align: center;
}
.limit + .limit {
  border-left: 6rpx solid #f9f9f9;
}
.normal-text {
  font-size: 28rpx;
  line-height: 36rpx;
}
.gray-text {
  font-size: 24rpx;
  line-height: 36rpx;
  color: #666;
}
.normal-text {
  font-size: 24rpx;
  line-height: 36rpx;
}
.category-img {
  margin: 15rpx;
  width: 150rpx;
  height: 114rpx;
}

.product {
  display: inline-flex;
}
.product + .product {
  border-top: 2rpx solid #f9f9f9;
}
.product-img {
  margin: 10rpx 20rpx;
  width: 230rpx;
  height: 160rpx;
}

.middle-desc {
  height: 160rpx;
  width: 360rpx;
  font-size: 26rpx;
}
.product-name,
.product-spec {
  font-size: 26rpx;
  line-height: 55rpx;
}

.product-spec {
  color: #666;
}

.product-price {
  margin-top: 25rpx;
  color: #e62225;
}

.icon-cart {
  margin: 100rpx 0 0 40rpx;
  background-color: #22ac38;
  font-size: 30rpx;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  width: 57rpx;
  height: 57rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.load-more {
  width: 100%;
  padding: 100rpx 0;
  text-align: center;
  color: gray;
  background-color: #f9f9f9;
  font-size: 26rpx;
}
.blank {
  height: 200rpx;
  width: 100%;
  background-color: #f9f9f9;
}
</style>
